<%@ page language="java" contentType="text/html;charset=UTF-8" %>
<%@ include file="../../inc/global.jsp" %>
<!doctype html>
<html>
<head>
    <title><fmt:message key="jsp.title.mall.admin.nav"/></title>
    <%@ include file="./head.jsp" %>
    <style type="text/css">
        .add-form {display: none;}
        #vals input[type=text] {width:50px;}
        #vals{margin:3px}
        .addVal, .delVal{cursor:pointer; margin-bottom:3px; padding:1px 7px; height:auto; line-height: 22px; border: 1px solid #fff;}
        .nav-attr-form table {width:99%}
    </style>
    <script type="text/javascript">
        function NavAttr() {
            var _this = this;
            function bindAddFormEvents() {
                $('.add').click(function() {
                    _this.addForm(this);
                    return false;
                });
            };
            function initAddForm(o) {
                $('table tr').mouseover(function(){
                    $(this).addClass('tr-mouseover');
                }).mouseout(function(){
                    $(this).removeClass('tr-mouseover');
                });
            };
            this.addForm = function(o) {
                var form = '.add-form';
                $(form).dialog({
                    autoOpen: false,
                    closeText: "关闭",
                    closeOnEscape: true,
                    position: { my: "left top", at: "left bottom", of: $(o)},
                    minWidth:300,
                    maxWidth:1000,
                    maxHeight:600,
                    width: 600,
                    beforeClose: function( event, ui ) {

                    },
                    show: {
                        effect: "blind",
                        duration: 300
                    },
                    open: function( event, ui ) {
                        var url = $(o).find('a').attr('href');
                        $.ajax({
                            url:url,
                            type:'GET',
                            success:function(data){
                                $(form).html(data);
                            },
                            error:function(){
                                alert('获取数据失败，请联系管理员！');
                            }
                        });
                    },
                    close:function(event, ui) {
                        bindAddFormEvents();
                    }
                });
                var isOpen = $( ".add-form" ).dialog( "isOpen" );
                if(!isOpen) {
                    $('.add-form').dialog('open');
                }
                return false;
            }
            this.init = function () {
                initAddForm();
                bindAddFormEvents();
            }
        }
        var attrRelation = new NavAttr();
        $(function(){
            attrRelation.init();
        });
    </script>
</head>
<body>
<div class="main">
    <div class="wrapper">
        <%@include file="../header.jsp" %>
        <%@include file="./sidebar.jsp"%>
        <!-- sidebar end -->
        <div class="content items">
            <div class="menu-tab">
                <span class="right-btn"><a href="/mall/adm/nav/attr/create?navId=${nav.id}"><fmt:message key="jsp.menu-tab.mall.admin.nav.attr.add"/></a></span>
                <ul>
                    <li><a href="/mall/adm/nav">分类管理</a></li>
                    <li class="slt"><a href="/mall/adm/nav/attr">${nav.name} <fmt:message key="jsp.menu-tab.mall.admin.nav.attr.list"/></a></li>
                    <li><a href="/mall/adm/nav/attr/create?navId=${nav.id}"><fmt:message key="jsp.menu-tab.mall.admin.nav.attr.add"/></a></li>
                </ul>
            </div>
            <table>
                <tr>
                    <th style="width: 60px">名称</th>
                    <th style="width: 60px; text-align:center;">是否必选</th>
                    <th style="width: 60px; text-align:center;">销售属性</th>
                    <th style="width: 60px; text-align:center;">单选/多选</th>
                    <th style="width: 60px; text-align:center;">图片</th>
                    <th>属性值</th>
                    <th style="text-align:center;width:90px;">移动</th>
                    <th style="text-align:center;width:90px;">修改</th>
                </tr>
                <c:forEach var="item" items="${navAttrVOList}">
                    <tr id="${item.attrRelation.id}">
                        <td>${item.attrName.name}</td>
                        <td style="text-align:center;">
                            <c:if test="${item.attrRelation.isRequired}">必选</c:if>
                            <c:if test="${!item.attrRelation.isRequired}">可选</c:if>
                        </td>
                        <td style="text-align:center;">
                            <c:if test="${item.attrRelation.isSale}">销售属性</c:if>
                            <c:if test="${!item.attrRelation.isSale}">非销售属性</c:if>
                        </td>
                        <td style="text-align:center;">
                            <c:if test="${item.attrRelation.isMultiple}">多选</c:if>
                            <c:if test="${!item.attrRelation.isMultiple}">单选</c:if>
                        </td>
                        <td style="text-align:center;">
                            <c:if test="${item.attrRelation.isImage}">有图</c:if>
                            <c:if test="${!item.attrRelation.isImage}">无图</c:if>
                        </td>
                        <td>
                            <c:forEach var="attrVal" items="${item.attrValList}">
                                ${attrVal.alias}(${attrVal.val})&nbsp;
                            </c:forEach>
                        </td>
                        <td style="text-align:center">
                            <a href="###" class="up">[向上]</a>
                            &nbsp;
                            <a href="###" class="down">[向下]</a>
                        </td>
                        <td style="text-align:center;">
                            <a href="/mall/adm/nav/attr/update?navId=${nav.id}&navAttrId=${item.attrRelation.id}" class="edit">修改</a>
                        </td>
                    </tr>
                </c:forEach>
            </table>
        </div>
    </div>
</div>
</body>
</html>